<template>
	<view>
		<mzy-tabs :list="list" v-model="active" listKey='lable' grow activeColor='#77D18D' color='#A2A1A1' @change.stop="handleChange" />
		<!-- 可领取 -->
		<view class="main" v-show="active == 0">
			<view class="main-content">
				<view class="" v-if="couponList">
					<view class="main-ul">
						<view class="main-li" v-for="coupon in couponList" :key="coupon.id" @tap.stop="getCoupon(coupon.id)">
							<image class="main-li-img" src="/static/images/voucher_on.png"></image>
							<view class="main-li-text">
								<view class="text-content">
									<view class="text-left">
										<text>￥</text><text class="text-left-money">{{coupon.coupon_price}}</text>
									</view>
									<view class="text-right">
										<view class="text-right-top">
											<text>订单满{{coupon.full_price}}可用</text>
										</view>
										<view class="text-right-bottom">
											<text>有效期至: {{coupon.end_time}}</text>
										</view>
									</view>
								</view>
								<view class="detail" @tap.stop="toDetail(coupon.id)">
									<view class="detail-content">
										<view class="detail-desc">
											<text>详情</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 未使用 -->
		<view class="main" v-show="active == 1">
			<view class="main-content">
				<view class="main-ul">
					<view class="main-li" v-for="coupon in couponList" :key="coupon.id"  @tap.stop="cancelCoupon(coupon.id)">
						<image class="main-li-img" src="/static/images/voucher_on.png"></image>
						<view class="main-li-text">
							<view class="text-content">
								<view class="text-left">
									<view class="text-left-top">
										<text>￥</text><text class="text-left-money">{{coupon.coupon_price}}</text>
									</view>
									<view class="text-left-bottom">
										<text>立即核销</text>
									</view>
								</view>
								<view class="text-right">
									<view class="text-right-top">
										<text>订单满{{coupon.full_price}}可用</text>
									</view>
									<view class="text-right-bottom">
										<text>有效期至: {{coupon.end_time}}</text>
									</view>
								</view>
							</view>
							<view class="detail" @tap.stop="toDetail(coupon.id)">
								<view class="detail-content">
									<view class="detail-desc">
										<text>详情</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 已使用 -->
		<view class="main" v-show="active == 2">
			<view class="main-content">
				<view class="main-ul">
					<view class="main-li" v-for="coupon in couponList" :key="coupon.id">
						<image class="main-li-img" src="/static/images/voucher_off.png"></image>
						<view class="main-li-text">
							<view class="text-content">
								<view class="text-left">
									<text>￥</text><text class="text-left-money">{{coupon.coupon_price}}</text>
								</view>
								<view class="text-right">
									<view class="text-right-top">
										<text>订单满{{coupon.full_price}}可用</text>
									</view>
									<view class="text-right-bottom">
										<text>有效期至: {{coupon.end_time}}</text>
									</view>
								</view>
							</view>
							<view class="detail" @tap.stop="toDetail(coupon.id)">
								<view class="detail-content">
									<view class="detail-desc">
										<text>详情</text>
									</view>
								</view>
							</view>
						</view>
						<view class="li-status">
							<view class="li-status-content">
								<image class="li-status-img" src="/static/images/off_close.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 已过期 -->
		<view class="main" v-show="active == 3">
			<view class="main-content">
				<view class="main-ul">
					<view class="main-li" v-for="coupon in couponList" :key="coupon.id">
						<image class="main-li-img" src="/static/images/voucher_off.png"></image>
						<view class="main-li-text">
							<view class="text-content">
								<view class="text-left">
									<text>￥</text><text class="text-left-money">{{coupon.coupon_price}}</text>
								</view>
								<view class="text-right">
									<view class="text-right-top">
										<text>订单满{{coupon.full_price}}可用</text>
									</view>
									<view class="text-right-bottom">
										<text>有效期至: {{coupon.end_time}}</text>
									</view>
								</view>
							</view>
							<view class="detail" @tap.stop="toDetail(coupon.id)">
								<view class="detail-content">
									<view class="detail-desc">
										<text>详情</text>
									</view>
								</view>
							</view>
						</view>
						<view class="li-status">
							<view class="li-status-content">
								<image class="li-status-img" src="/static/images/off_date.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<lee-popup ref="popup" type="bottom" class="popup-main" padding='0'>
			<view class="" @tap.stop=''>
				<view class="phone-main">
					<view class="phone-content">
						<input class="phone-content-input" type="text" v-model="phone" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="submit-button">
					<view class="button-ul">
						<view class="button-li" @tap.stop="closePop()">
							<text>取消</text>
						</view>
						<view class="button-li color-green" @tap.stop="confirm()">
							<text>核销</text>
						</view>
					</view>
				</view>
			</view>
		</lee-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{lable:'可领取', value:1},
					{lable:'未使用', value:2},
					{lable:'已使用', value:3},
					{lable:'已过期', value:4}
					],
				active:0,
				selectId: 0,
				couponList: [],
				phone: ''
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			toDetail(id){
				uni.navigateTo({
					url: "/pages/vouchers/detail?id=" + id
				})
			},
			getCoupon(thisId){
				let _this = this
				let data = {
					openid : uni.getStorageSync('openid'),
					id: thisId
				}
				_this.http.apiResquest({
					url: 'api/index/receive_coupon',
					method: 'POST',
					query: data
				}).then(res=>{
					uni.showToast({
						title: '领取成功',
						icon: 'success',    //将值设置为 success 或者 ''
						duration: 2000    //持续时间为 2秒
					})  
				})
			},
			cancelCoupon(id) {
				this.selectId = id
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			},
			confirm() {
				
				let _this = this
				let data = {
					openid : uni.getStorageSync('openid'),
					id: _this.selectId,
					hexiao_phone: _this.phone,
				}
				_this.http.apiResquest({
					url: 'api/index/cancellation_coupon',
					method: 'POST',
					query: data
				}).then(res=>{
					_this.phone = ''
					this.$refs.popup.close()
				})
			},
			getList() {
				let _this = this
				let openid = uni.getStorageSync('openid')
				let trueActive = _this.active+1
				_this.http.apiResquest({
					url: 'api/index/my_coupon?type=' + trueActive + '&openid=' + openid,
					method: 'GET'
				}).then(res=>{
					_this.couponList = res
				})
			}
			,handleChange(index,tab){
				let _this = this
				this.active = index
				this.getList()
			}
		}
	}
</script>

<style>
.main{
	width: 100%;
	background-color: #F4F4F4;
}
.main-content{
	width: 90%;
	position: relative;
	left: 5%;
}
.main-ul{
	width: 100%;
	margin-top: 60rpx;
	margin-bottom: 60rpx;
}
.main-li{
	width: 100%;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.main-li-img{
	width: 100%;
	height: 220rpx;
}
.main-li-text{
	width: 100%;
	height: 0;
	position: relative;
	top: -220rpx;
}
.text-content{
	width: 100%;
	height: 220rpx;
	display: flex;
	color: #FFFFFF;
}
.text-left{
	width: 28%;
	line-height: 220rpx;
	text-align: center;
	border-right: 1rpx dashed #FFFFFF;
}
.text-left-top{
	margin-top: 45rpx;
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
}
.text-left-bottom{
	width: 80%;
	position: relative;
	font-size: 26rpx;
	left: 10%;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 6rpx;
	border: 1rpx solid #FFFFFF;
}
.text-left-money{
	font-size: 56rpx;
	font-weight: 800;
}
.text-right{
	width: 62%;
	position: relative;
	left: 10%;
}
.text-right-top{
	font-size: 36rpx;
	line-height: 60rpx;
	font-weight: 600;
	margin-top: 55rpx;
}
.text-right-bottom{
	font-size: 26rpx;
	line-height: 50rpx;
}
.li-status{
	width: 100%;
	height: 0;
	position: relative;
	top: -170rpx;
	left: 534rpx;
}
.li-status-content{
	width: 120rpx;
	height: 120rpx;
}
.li-status-img{
	width: 120rpx;
	height: 120rpx;
}
.popup-main{
	position: relative;
	top: 50%;
}
.phone-main{
	padding-top: 30rpx;
	height: 120rpx;
	width: 100%;
}
.phone-content{
	width: 90%;
	height: 80rpx;
	position: relative;
	left: 5%;
	top: 20rpx;
	border: 1px solid gray;
	border-radius: 12rpx;
}
.phone-content-input{
	width: 90%;
	height: 80rpx;
	line-height: 80rpx;
	margin-left: 10rpx;
}
.submit-button{
	width: 100%;
	height: 100rpx;
}
.button-ul{
	width: 100%;
	display: flex;
}
.button-li{
	width: 50%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color: #999999;
}
.color-green{
	color: #39B54A;
}
.detail{
	width: 100%;
	height: 0;
	position: relative;
	left: 84%;
	top: -60rpx;
}
.detail-content{
	width: 80rpx;
	height: 40rpx;
}
.detail-desc{
	width: 100%;
	height: 40rpx;
	font-size: 24rpx;
	text-align: center;
	line-height: 40rpx;
	border-radius: 6rpx;
	color: #FFFFFF;
	border: 1rpx solid #FFFFFF;
}

</style>
